<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>登录</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <%@include file="../includes/common.jsp" %>
    <style type="text/css">
        *{list-style-type:none;}
        #star{color:#666;font:12px/1.5 Arial;}
            /* star */
        #star{position:relative;width:200px;height:10px;}
        #star ul,#star span{float:left;display:inline;height:19px;line-height:19px;}
        #star ul{margin:0 10px;}
        #star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(<c:url value="/img/star.png"/>) no-repeat;}
        #star strong{color:#f60;padding-left:10px;}
        #star li.on{background-position:0 -28px;}
        #star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(<c:url value="/img/icon.gif"/>) no-repeat;padding:7px 10px 0;}
        #star p em{color:#f60;display:block;font-style:normal;}
    </style>
</head>
<body style="padding: 0;">
<div class="container-fluid" style="padding: 0">
    <div class="row-fluid">

            <div class="container" style="height: 500px;width: 1300px;">
                <div style="float: left;height: 500px;width: 250px;">
                    <ul id="menuTree" class="ztree"></ul>
                </div>
                <div style="float: left"><iframe src="" height="500" width="800" id="frame"></iframe></div>


                <div style="float: left;height: 500px;width: 200px;margin-left: 10px">
                    <div id="notes" style="  width: 230px;height: 260px" >
                        <label style="font-size: 20px;">记笔记</label>
                        <textarea style="width: 230px;height: 230px;" id="noteContent">${content}</textarea>
                        <div style="width: 230px;height: 10px;text-align: center">
                            <input type="button" class="btn btn-primary" onclick="saveNote(${scormId})" value="保存"/>
                            <input type="hidden" id="noteId" value="${noteId}" />
                        </div>
                    </div>
                    <div id="comment" style="margin-top: 30px;  width: 230px;height: 210px" >
                        <label style="font-size: 20px;">评价课件</label>
                        <div id="star">
                            <ul>
                                <li><a href="javascript:;">1</a></li>
                                <li><a href="javascript:;">2</a></li>
                                <li><a href="javascript:;">3</a></li>
                                <li><a href="javascript:;">4</a></li>
                                <li><a href="javascript:;">5</a></li>
                            </ul>
                            <span></span>
                            <p></p>
                            <input type="hidden" id="score" >
                        </div>
                        <textarea style="width: 230px;height: 150px;" id="commentContent">${commentContent} </textarea>
                        <div style="width: 230px;height: 10px;text-align: center">
                            <input type="button" class="btn btn-primary" onclick="saveComment(${scormId})" value="保存"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- /container -->
</body>
</html>
<script>

    var settingMenu = {
        view: {
            expandSpeed: "fast"
        },
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "p", "N": "s" }
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId"
            },
            key: {
                name: "name"
            },
            keep: {
                parent: true
            }
        },
        callback:{
            onClick:nodeClick
        }
    };


    var zNodes = [
        <c:forEach var="scormNode" items="${scormNodes}">
        {   id: "${scormNode.nodeId}",
            pId: "${scormNode.parentId}",
            name: "${scormNode.nodeTitle}",
            scourl: "${scormNode.url}",
            nodeId: "${scormNode.id}"
        },
        </c:forEach>
    ];

    $(function () {
        $.fn.zTree.init($("#menuTree"), settingMenu, zNodes);
        var treeObj = $.fn.zTree.getZTreeObj("menuTree");
        treeObj.expandAll(true);
    });

    function nodeClick(event, treeId, treeNode){
        if(treeNode.scourl==""){
            return;
        }
        var scoUrl= basePath+treeNode.scourl.substring(treeNode.scourl.lastIndexOf("scorms")-1);
        $("#frame").attr("src",scoUrl);

        //给scoInfo[]数组赋值
        scoInfo['nodeId']=treeNode.nodeId+"";
        scoInfo['cmi.core.student_id'] ="${student.id}";
        scoInfo['cmi.core.student_name'] ="${student.loginName}";

    }
    function saveNote(id){
        if(${noteId==0}){
            $.ajax({
                url: basePath + "note/saveNote",
                data: {
                    scormId:id,
                    content:$("#noteContent").val().trim(),
                    noteTime: showLocale(new Date())
                },
                dataType: "json",
                type: "POST",
                success: function () {
                    $.messager.alert("系统提示","保存成功！");
                },
                error: doError
            });
        }else{
            $.ajax({
                url: basePath + "note/editNote",
                data: {
                    id:${noteId},
                    scormId:id,
                    content:$("#noteContent").val().trim(),
                    noteTime: showLocale(new Date())
                },
                dataType: "json",
                type: "POST",
                success: function () {
                    $.messager.alert("系统提示","保存成功！");
                },
                error: doError
            });
        }

    }

    function saveComment(id){
        $.ajax({
            url: basePath + "comment/saveComment",
            data: {
                scormId:id,
                commentContent:$("#commentContent").val().trim(),
                commentTime: showLocale(new Date()),
                commentScore: $("#score").val().trim()
            },
            dataType:"json",
            type:"POST",
            success:function(){
                $.messager.alert("系统提示","保存成功！");
            },
            error:doError

        });
    }


    $(function(){
        var oStar = document.getElementById("star");
        var aLi = oStar.getElementsByTagName("li");
        for (var i = 0; i < aLi.length; i++) aLi[i].className = i < ${commentScore} ? "on" : "";
        if(${commentId!=0}){
            $("#commentContent").attr("readonly","readonly")
            $("#comSave").hide();
        }else{
            var oStar = document.getElementById("star");
            var aLi = oStar.getElementsByTagName("li");
            var oUl = oStar.getElementsByTagName("ul")[0];
            var oSpan = oStar.getElementsByTagName("span")[1];
            var oP = oStar.getElementsByTagName("p")[0];
            var i = iScore = iStar = 0;
        var aMsg = [
            "很不满意|非常不满",
            "不满意|不满意",
            "一般|一般",
            "满意|满意",
            "非常满意|非常满意"
        ]

        for (i = 1; i <= aLi.length; i++){
            aLi[i - 1].index = i;

            //鼠标移过显示分数
            aLi[i - 1].onmouseover = function (){
                fnPoint(this.index);
                //浮动层显示
                oP.style.display = "block";
                //计算浮动层位置
                oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
                //匹配浮动层文字内容
                oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
            };

            //鼠标离开后恢复上次评分
            aLi[i - 1].onmouseout = function (){
                fnPoint();
                //关闭浮动层
                oP.style.display = "none"
            };

            //点击后进行评分处理
            aLi[i - 1].onclick = function (){
                iStar = this.index;
                oP.style.display = "none";
                oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
            }
        }

        //评分处理
        function fnPoint(iArg){
            //分数赋值
            iScore = iArg || iStar;
            for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
            $("#score").attr("value",iScore);
        }

    }
    })
</script>
